<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./resat.css">
    <title>Document</title>
    <style>
        body{
            font-size: 19px;
        }
        h1{
            color: rosybrown;
            font-size: 18px;
        }

        button{
            width: 5.333333rem;
            height: 2.133333rem;
            border-radius: 6px;
        }
        input{
            width: 10.666667rem;
            height: 1.6rem;
            border-color: salmon;
        }
        tr {
			text-align: center;
		}

        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div id="box">
        <center>
            <h1>添加学生</h1>
            <!-- 只要一写表单就要想到v-model 对数据进行绑定 -->
            <input type="text" placeholder="请输入你的姓名" v-model="name" />
            <input type="text" placeholder="请输入你的年龄" v-model="age" />
            <button type="button" @click="add()">添加</button>
        </center>

        <center>
            <h1>查询学生</h1>
            <input type="text" placeholder="请输入查询姓名或年龄" v-model="mytext" />
            <button type="button" @click="select()">查询</button>
        </center>

        <table border="3" cellspacing="0" width="50%" align="center">
            <caption>
                <h1>学生信息表</h1>
            </caption>
            <tr height="60px">
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <tr v-for="(obj,index) in jsonArr" v-bind:key="index">
                <th>
                    {{index+1}}
                </th>
                <th>
                    {{obj.username}} <a href="#" @click.prevent="change1(obj)">修改</a>
                </th>
                <th>
                    {{obj.age}} <a href="#" @click.prevent="change2(obj)">修改</a>
                </th>
                <th>
                    <a href="#" @click.prevent="delline(index)">删除</a>
                </th>
            </tr>
            <tr>
                <td colspan="4" align="center"><a href="" @click.prevent="delAll()">全部删除</a></td>
            </tr>
        </table>
    </div>


    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#box',
            data: {
                jsonArr: [],
                name: '',
                age: '',
                mytext: '',
                arr: []
            },
            methods: {
                add() {
                    //获取表单中填的name和age   把name和age封装到json对象中，再把这个json对象放到jsonArr中
                    var name = this.name
                    var age = this.age;
                    //非空校验  空串转布尔 转成false
                    if (!name || !age) {
                        //alert("用户名和年龄不能为空")
                        return;
                    }
                    var jsonObj = {
                        'username': name,
                        'age': age
                    };
                    //push() 向数组的末尾添加一个元素或更多个元素，并返回新的长度。
                    //unshift() 向数组的开头添加一个元素或更多元素，并返回新的长度。
                    //把json对象放到jsonArr中
                    this.jsonArr.push(jsonObj);
                    //给arr数组也备份一份学生数据。
                    this.arr.push(jsonObj);
                    //添加完 再把数据清空掉
                    this.name = '';
                    this.age = '';
                },
                delAll() {
                    //alert("全部删除")
                    //全部删除就是把数组置空
                    if (window.confirm("确认全部删除吗")) {
                        this.jsonArr = [];
                        this.arr = []
                    }
                },
                delline(index) {
                    //alert("确认删除这一行吗？")
                    var a = this.jsonArr[index].name;
                    if (window.confirm("确定删除这一行吗？")) {
                        this.jsonArr.splice(index, 1);
                    }
                },
                change1(obj) {
                    if (window.confirm("确定修改这个名字吗")) {
                        var getName = prompt("请输入姓名:")
                        if (getName) {
                            obj.username = getName;
                            alert("更新成功");
                        } else {
                            alert("更新失败");
                        }
                    }
                },
                change2(obj) {
                    if (window.confirm("确定修改这个年龄吗")) {
                        var getAge = prompt("请输入年龄:")
                        if (getAge) {
                            obj.age = getAge;
                            alert("更新成功");
                        } else {
                            alert("更新失败")
                        }
                    }
                },
                select() {
                    //alert("请输入你要查找的姓名或年龄")
                    if (this.mytext) {
                        this.jsonArr = this.arr;
                        var list = this.jsonArr.filter(item => item.username.indexOf(this.mytext) > -1 || item.age.indexOf(this.mytext) >
                            -1);
                        if (list.length != 0) {
                            alert("查找成功");
                            this.jsonArr = list;
                        } else {
                            alert("查找失败");
                            this.jsonArr = []
                        }
                        //清空输入
                        this.mytext = ''
                    } else {
                        alert("请输入要查找的姓名或年龄");
                    }
                }
            }
        })
    </script>
</body>
</html>